<template>
  <div>
    <el-form
      ref="form"
      label-width="180px"

    >
      <el-form-item
        label="收货地址："
        type="textarea"
        autosize
      >
        <el-autocomplete
          class="inline-input"
          v-model="order.receiver_address"
          :fetch-suggestions="querySearch"
          placeholder="请输入收货地址"
          :trigger-on-focus="false"
        >
        </el-autocomplete>
      </el-form-item>

      <el-form-item
        label="地址备注："
        type="textarea"
        autosize
      >
        <el-autocomplete
          class="inline-input"
          v-model="order.receiver_remark_address"
          :fetch-suggestions="querySearch"
          placeholder="请输入收货地址备注"
          :trigger-on-focus="false"
        >
        </el-autocomplete>
      </el-form-item>

      <el-form-item
        label="收货电话："
        type="textarea"
        autosize
      >
        <!-- <el-input v-model="order.receiver_mobile"></el-input> -->
        <el-autocomplete
          class="inline-input"
          v-model="order.receiver_mobile"
          :fetch-suggestions="querySearch"
          placeholder="请输入收货电话"
          :trigger-on-focus="false"
        >
        </el-autocomplete>
      </el-form-item>

      <hr>

      <el-form-item
        label="购买地址："
        type="textarea"
        autosize
      >
        <el-autocomplete
          class="inline-input"
          v-model="order.buy_address"
          :fetch-suggestions="querySearch"
          placeholder="请输入购买地址"
          :trigger-on-focus="false"
        >
        </el-autocomplete>
      </el-form-item>

      <el-form-item
        label="购买地址备注："
        type="textarea"
        autosize
      >
        <el-autocomplete
          class="inline-input"
          v-model="order.buy_remark_address"
          :fetch-suggestions="querySearch"
          placeholder="请输入购买地址备注"
          :trigger-on-focus="false"
        >
        </el-autocomplete>
      </el-form-item>

      <el-form-item label="购买要求-所有人可见：">
        <el-input
          type="textarea"
          v-model="order.buy_request"
          placeholder="请输入购买要求"
        ></el-input>
      </el-form-item>

      <el-form-item label="隐私要求-接单者可见：">
        <el-input
          type="textarea"
          v-model="order.secret"
          placeholder="请输入购买隐私要求"
        ></el-input>
      </el-form-item>

      <hr>
      <el-form-item label="商品价格：">
        <el-input
          placeholder="请输入商品价格"
          v-model="order.buy_price"
        >
          <template slot="append">元</template>
        </el-input>
      </el-form-item>

      <el-form-item label="商品重量：">
        <el-input
          placeholder="请输入商品重量"
          v-model="order.buy_weight"
        >
          <template slot="append">KG</template>
        </el-input>
      </el-form-item>

      <hr>

      <el-form-item label="立即购买：">
        <el-switch
          v-model="liji"
          active-value="Y"
          inactive-value="N"
        ></el-switch>
      </el-form-item>

      <el-form-item
        v-if="liji=='N'"
        label="预约时间购买："
      >
        <div class="block">
          <el-date-picker
            v-model="order.appointment_time"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <hr>
      <el-form-item label="跑腿费用：">
        <el-input
          placeholder="请输入跑腿金额"
          v-model="order.reward"
        >
          <template slot="append">元</template>
        </el-input>
      </el-form-item>

      <hr>
      <el-form-item label="到期无人接单自动取消：">
        <el-switch
          v-model="cancel"
          active-value="Y"
          inactive-value="N"
        ></el-switch>
      </el-form-item>

      <el-form-item
        v-if="cancel=='Y'"
        label="选择到期取消时间："
      >
        <div class="block">
          <el-date-picker
            v-model="order.cancel_time"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <hr>

      <el-form-item>
        <el-button
          type="primary"
          @click="addBuyOrder"
        >立即下单</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
  import Vue from "vue";
  import axios from "axios";
  import orderApi from "~/api/order.js";
  import baseApi from "~/api/base.js";
  import payApi from "~/api/pay.js";
  export default {
    data() {
      return {
        order: {},
        liji: "Y",
        cancel: "N",
        map: [],
        item: {}
      };
    },
    methods: {
      onSubmit() {
        console.log("submit!");
      },
      querySearch(queryString, cb) {
        return baseApi.getAddress(queryString).then(res => {
          cb(res.data.data);
        });
      },

      addBuyOrder() {
        return orderApi.saveBuyOrder(this.order).then(res => {
          if (res.data.flag) {
            this.$message({
              message: "下单成功",
              type: "success"
            });
            console.log(res.data.data);
            this.item.orderid = res.data.data.orderid;
            this.item.money = res.data.data.money;
            payApi.getPayUrl(this.item).then(res2 => {
              console.log(res2);
              window.location.href = res2.data.data.payUrl;
            });
          } else {
            this.$message({
              message: res.data.message,
              type: "error"
            });
          }
          if (res.data.message == "请登录后再下单") {
            setTimeout(function() {
              location.href = "/login";
            }, 1000);
          }
        });
      }
    }
  };
</script>
<style>
  .el-autocomplete {
    /* width: 730px; */
    width: 100%;
  }
  .mymargin {
    margin: 10px 10px 10px 10px;
  }
  hr {
    background-color:rgba(239, 34, 34, 0.107)
  }
</style>
